@import './reset';
@import './theme';
@import './theme/index.css';

html,
body {
  height : 100%;
}

.page-container {
  width         : 100%;
  height        : 100%;
  background    : rgba(25, 35, 48, 0.2) url(/image/starry-sky.svg) no-repeat center/cover;
  overflow      : hidden;
  border-radius : 4px;

  @color        : var(--header-font-color);

  > .el-header {

    -webkit-user-select : none;
    -webkit-app-region  : drag;
    position            : relative;
    z-index             : 2;
    color               : @color;
    background-color    : var(--background-color-base);
    box-shadow          : 0 2px 3px 2px #00000045;
    display             : flex;
    justify-content     : space-between;
    align-items         : center;

    .el-button {
      -webkit-app-region : no-drag;
      color              : @color;
      font-size          : 18px;
      padding-left       : 12px;

      &:hover {
        color : var(--header-hover-font-color);
      }
    }
  }

  > .el-main {
    // box-sizing: border-box;
    background   : rgba(25, 35, 48, 0.4);
    position     : relative;
    z-index      : 1;
    border-left  : 1px solid var(--background-color-base);
    border-right : 1px solid var(--background-color-base);

    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track {
      width : 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color : #304057;
      border-radius    : 6px;
    }

    &::-webkit-scrollbar-corner {
      background-color : #1d2636
    }
  }

  > .el-footer {
    //-webkit-user-select : none;
    //-webkit-app-region  : drag;
    background-color : var(--background-color-base);
    position         : relative;
    z-index          : 1;
    box-shadow       : 0 -2px 3px 2px #00000045;

    display          : flex;
    justify-content  : space-between;
    align-items      : center;

    .el-button {
      -webkit-app-region : no-drag;
      color              : @color;

      &:hover {
        color : var(--header-hover-font-color);
      }
    }
  }
}

.el-select-dropdown {
  .el-select-dropdown__list {
    .el-select-dropdown__item.hover {
      background-color : rgba(0, 0, 0, 0.2);
    }
  }
}


.el-button {
  &&--primary {
    border-color     : rgba(0, 0, 0, 0.2);
    background-color : rgba(0, 0, 0, 0.6);
    color            : var(--header-font-color);

    &:hover {
      color            : var(--header-hover-font-color);
      background-color : rgba(0, 0, 0, 0.4);
    }
  }

  &&--success {
    border-color     : rgba(34, 80, 25, 0.2);
    background-color : rgba(34, 80, 25, 0.8);
    color            : var(--header-font-color);

    &:hover {
      color            : var(--header-hover-font-color);
      background-color : rgba(34, 80, 25, 0.6);
    }
  }

  &&--warning {
    border-color     : rgba(208, 104, 11, 0.2);
    background-color : rgba(208, 104, 11, 0.8);
    color            : var(--header-font-color);

    &:hover {
      color            : var(--header-hover-font-color);
      background-color : rgba(208, 104, 11, 0.6);
    }
  }

  &&--danger {
    border-color     : rgba(140, 30, 0, 0.2);
    background-color : rgba(140, 30, 0, 0.8);
    color            : var(--header-font-color);

    &:hover {
      color            : var(--header-hover-font-color);
      background-color : rgba(140, 30, 0, 0.6);
    }
  }
}


.el-dialog {
  background-color : rgba(33, 44, 61, 0.96);

  .el-dialog__close {
    color : var(--header-font-color);

    &:hover {
      color : var(--header-hover-font-color);
    }
  }

  .el-dialog__title {
    color     : var(--header-font-color);
    font-size : 14px;
  }
}

.el-input input,
.el-textarea textarea {
  background-color : rgba(0, 0, 0, 0.2);
  border-color     : rgba(0, 0, 0, 0.2);

  &:focus {
    border-color : rgba(0, 0, 0, 0.3);
    box-shadow   : 0 0 2px rgba(0, 0, 0, 0.4);
  }

  &:hover {
    border-color : rgba(0, 0, 0, 0.3);
  }


}

.el-input input {
  &::placeholder {
    color          : var(--header-font-color);
    letter-spacing : 2px;
    font-weight    : 100;
  }
}

.el-textarea textarea {
  &::placeholder {
    color          : #6F87AA;
    letter-spacing : 2px;
  }
}

